chat-message {
  $message_background-color_self: #007aff;
  $message_text-color_self: white;
  $message_background-color_other: white;
  $message_text-color_other: black;

  // p标签会自带上下14的margin
  p {
    margin: 0;
  }

  .message {
    // 内部的定位会在这个定位的基础上进行定位
    position: relative;
    margin-bottom: 15px;

    .message_img {
      // 决定定位, 脱离文档流
      position: absolute;
      top: 10px;
      width: 50px;
      height: 50px;
      border-radius: 50px;
    }

    .message_detail {
      // 行内块级
      display: inline-block;
      width: 100%;

      .message_info {
        font-size: 12px;
        color: #888;
        padding: 5px;
      }

      .message_content {
        // 内部的定位会在这个定位的基础上进行定位
        position: relative;
        padding: 8px;
        font-size: 14px;
        border-radius: 5px;
        border: 1px solid #ddd;
        max-width: 85%;

        span.message_triangle {
          display: block;
          position: absolute;
          width: 10px;
          height: 10px;
          top: 10px;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          border-radius: 1px;
          border: 1px solid #ddd;
        }
      }
    }
  }

  // 左侧
  .message.left {
    .message_img {
      left: 0;
    }

    .message_detail {
      padding-left: 60px;

      .message_info {
        text-align: left;
      }

      .message_content {
        background-color: $message_background-color_other;
        color: $message_text-color_other;
        float: left;

        span.message_triangle {
          background-color: $message_background-color_other;
          left: -6px;
          border-top-width: 0;
          border-right-width: 0;
        }
      }
    }
  }

  // 右侧
  .message.right {
    .message_img {
      right: 0;
    }

    ion-spinner {
      position: absolute;
      right: 10px;
      top: 60px;
    }

    .message_detail {
      padding-right: 60px;

      .message_info {
        text-align: right;
      }

      .message_content {
        background-color: $message_background-color_self;
        color: $message_text-color_self;
        float: right;

        span.message_triangle {
          background-color: $message_background-color_self;
          right: -6px;
          border-bottom-width: 0;
          border-left-width: 0;
        }
      }
    }
  }
}
